<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background: #000;
            margin: 100px auto;
            /* 参与过渡属性 */
            /* transition-property: all;
            transition-duration: 3s; */
            /* transition-delay: 3s */
            /* transition-timing-function: cubic-bezier(.7,1.84,0,-0.99) */
            transition: 3s
        }
        div:hover{
            background: green;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!-- 
    过渡属性的使用
        transition-property 属性参与过渡
            - 如果只有一个属性
            - 如果有多个属性，属性之间用空格隔开
            - 习惯性使用all 代替所有属性

        transition-duration 持续时间
            - ms s
        
        transition-delay 延迟时间 过了多少时间才会触发效果
            - ms s

        transition-timing-function 运动的方式
            - linear 匀速
            - ease 逐渐慢下来
            - ease-in 加速
            - ease-out 减速
            - ease-in-out 先加后减
            - 贝塞尔曲线

        简写方式
            属性:transition
            属性值:transition-property  transition-duration transition-delay  transition-timing-function

        当前过渡属性的默认运动方式是怎样？
            - 先加后减
            - 匀速
            - 逐渐慢下来
            - 越来越快 加速


 -->